<!-- 进度条 -->
<template>
  <div>
    <div class="container">
      <div class="progress">
        <div
          :style="{
            background: item.color,
            width: item.percentage * 100 + '%',
          }"
          :class="[!item.state ? 'zIndex' : '']"
          v-for="(item, index) in formData"
          :key="index"
        ></div>
      </div>
      <div class="title-lable">
        <div class="item flex" v-for="(item, index) in formData" :key="index">
          <div :style="{ background: item.color }"></div>
          <div>{{ item.title }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  props: {
    formData: {
      type: Array,
      default: () => {
        return [
          {
            title: "计划工时",
            proportion: 60,
            color: "#3F61F1",
            percentage: 0,
          },
          {
            title: "实际工时",
            proportion: 40,
            color: "#67C23A",
            percentage: 0,
          },
        ];
      },
    },
  },
  data() {
    return {};
  },
  watch: {
    formData: {
      handler(newVal, oldVal) {
        this.calculation();
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    //计算百分比
    calculation() {
      let sum = 0;
      let arr = [];
      this.formData.forEach((item) => {
        arr.push(item.proportion);
        sum += item.proportion;
      });

      this.formData.forEach((item) => {
        item.state = false;
        if (Math.max(...arr) == item.proportion) {
          item.state = true;
        }
        item.percentage = item.proportion / sum;
      });
      console.log(this.formData)
    },
  },
};
</script>

<style lang="scss" scoped>
.progress {
  height: 8px;
  background-color: #e4e7f0;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  z-index: 1;
  div {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-radius: 100px;
    z-index: 2;
    &:after {
      content: "";
      position: absolute;
      top: -1px;
      left: -1px;
      right: -1px;
      bottom: -1px;
      border-radius: 100px;
      z-index: -1;
    }
  }
}

.title-lable {
  margin-top: 10px;
  display: flex;
}
.item {
  margin-right: 5px;
}
.item > div {
  margin-right: 10px;
}
.item > div:first-child {
  width: 12px;
  height: 6px;
}

.zIndex {
  z-index: 9999;
}
</style>
